<!-- 示例模板 -->
<template>
    <div class="e-form">
        <el-dialog
            :visible.sync="dialogVisible"
            width="90%"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :fullscreen="fullscreen"
        >
            <!-- <div class="title">
                <img src="@/assets/test.png" alt="" />
                <span>外包商入库</span>
                <i class="el-icon-full-screen" @click="handleFullScreen"></i>
            </div> -->
            <div class="tabs">
                <el-tabs type="card" tab-position="left">
                    <el-tab-pane label="用户管理">
                        <div class="tabs-title"
                            style="display: flex; justify-content: space-between; align-items: center;"
                        >树形列表 <router-link to="/manageEntries">另一个测试页</router-link>
                            <div>
                                <el-button
                                    type="primary"
                                    size="small"
                                    style="background: #2e61d7"
                                    @click="onSearchPop"
                                >高级搜索</el-button>
                            </div>
                        </div>
                        <div style="display: flex">
                            <div class="left"><EtreeFile /></div>
                            <div
                                class="right"
                                style="margin-left: 20px; width: 100%"
                            >
                                <EtreeTable />
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="配置管理">
                        <div class="tabs-title">配置管理</div>
                    </el-tab-pane>
                    <el-tab-pane label="角色管理">
                        <div class="tabs-title">角色管理</div>
                    </el-tab-pane>
                    <el-tab-pane label="定时任务补偿">
                        <div class="tabs-title">定时任务补偿</div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="buttons">
                <span class="tip"
                    ><span style="color: red; margin-right: 0">*</span
                    >为必填项</span
                >
                <el-button
                    type="primary"
                    size="small"
                    style="background: #2e61d7"
                >提交</el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="background: #2e61d7"
                    @click="onSuccessPop"
                >保存</el-button>
                <el-button
                    type="primary"
                    size="small"
                    style="background: #2e61d7"
                    @click="onPromptPop"
                >删除</el-button>
                <el-button size="small" @click="handleClose">关闭</el-button>
            </div>
        </el-dialog>
        <span style="display: none;">{{searching}}{{localPopConfirm}}</span>
    </div>
</template>

<script>
import EtreeTable from '@/templates/table/treeTable.vue'
import EtreeFile from '@/templates/table/treeFile.vue'
import { mapMutations, mapState } from 'vuex'
import { showPromptPop, showSuccessPop, showErrorPop } from '@/utils/common'
export default {
    data () {
        return {
            dialogVisible: true,
            fullscreen: false
        }
    },
    components: { EtreeTable, EtreeFile },
    computed: {
        ...mapState(['searchForm', 'popConfirm']),
        searching () {
            if (this.searchForm.searching) {
                this.adviceSearch()
            }
            return this.searchForm.searching
        },
        localPopConfirm () {
            if (this.popConfirm) {
                this.delCallback()
            }
            return this.popConfirm
        }
    },
    // 有时状态未变化时不会触发，而且多个页面会重复触发，使用computed则不会触发多个页面事件
    // watch: {
    //     // 高级搜索标志
    //     'searchForm.searching' (val) {
    //         // val 为 true 表示点击了确定
    //         if (val) {
    //             // 页面自行处理的搜索业务方法
    //             this.adviceSearch()

    //             // 搜索后还原state状态
    //             let searchForm = JSON.parse(JSON.stringify(this.searchForm))
    //             searchForm.searching = false
    //             this.setSearchData(searchForm)
    //         }
    //     },
    //     // 弹窗点击"确定"后需要执行后续业务的标志
    //     popConfirm (val) {
    //         console.log('popConfirm: ', val)
    //         // val 为 true 表示点击了确定
    //         if (val) {
    //             // 页面要执行的业务方法
    //             this.delCallback()
    //         }
    //     }
    // },
    methods: {
        ...mapMutations(['setSearchData']),
        handleFullScreen () {
            this.fullscreen = !this.fullscreen
        },
        handleClose () {
            this.dialogVisible = false
        },
        onPromptPop () {
            showPromptPop('确定要删除吗？')
        },
        onSuccessPop () {
            showSuccessPop('保存成功了')
        },
        onErrorPop () {
            showErrorPop('删除失败了')
        },
        delCallback () {
            // 删除业务
            // ...
            // 执行后反馈
            this.onErrorPop()
        },
        // 弹出高级搜索
        onSearchPop () {
            callbackObj.changeLoadingState(false) // 调用客户端api关闭loading
            callbackObj.openWindow('/search') // OpenWindow为客户端提供打开弹窗的方法
        },
        adviceSearch () {
            console.log('执行高级搜索: ', JSON.stringify(this.searchForm))
            alert('执行高级搜索：' + JSON.stringify(this.searchForm))
        }
    }
}
</script>

<style lang="scss" scoped></style>
